<template>
  <div
    id="his_dropdown"
    @mouseover="show = true"
    @mouseout="show = false"
    :style="{ width: width }"
    :class="{ his_dropdown: true, is_none: !show }"
  >
    <div class="dropdown_nav">
      <span>看过</span>
      <span>收藏</span>
      <span>关注</span>
    </div>
    <div class="nav_have" v-if="checkNav === 0"></div>
    <div class="nav_collection" v-if="checkNav === 1"></div>
    <div class="nav_follow" v-if="checkNav === 2"></div>
    <span class="foot">查看全部记录</span>
  </div>
</template>

<script>
export default {
  name: "HistoryDropdown",
  data() {
    return {
      top: "0px",
      left: "0px",
      checkNav: 0,
      show: this.isShow,
      width: 270
    };
  },
  props: {
    idName: {
      type: String,
      default: ""
    },
    isShow: {
      type: Boolean,
      default: true
    },
    screenWidth: {
      type: Number
    }
  },
  watch: {
    isShow: function() {
      this.show = this.isShow;
      if (this.show === true) {
        this.initPosition();
      }
    }
  },
  mounted() {
    this.initPosition();
  },
  methods: {
    initPosition() {
      const position = document
        .getElementById(this.idName)
        .getBoundingClientRect();

      document.getElementById("his_dropdown").style.top = "50px";
      document.getElementById("his_dropdown").style.width = this.width + "px";
      const minMarginRight = 10;
      const a =
        position.left +
        this.width / 2 +
        position.width / 2 +
        minMarginRight -
        this.screenWidth;
      let positionLeft = position.left - this.width / 2;
      if (a > 0) {
        positionLeft = positionLeft - a;
      }
      document.getElementById("his_dropdown").style.left = positionLeft + "px";
    }
  }
};
</script>

<style lang="scss">
.is_none {
  display: none;
}
.his_dropdown {
  position: absolute;
  background-color: #ffffff;
  .dropdown_nav {
    height: 40px;
    width: 100%;
    background-color: #f5f5f5;

    span {
      line-height: 40px;
      width: 90px;
      display: table-cell;
      text-align: center;
      cursor: default;
    }
    span:hover {
      color: salmon;
      border-bottom: 1px solid salmon;
    }
  }
  .foot {
    width: 270px;
    line-height: 40px;
    display: table-cell;
    text-align: center;
  }
}
</style>
